<template>
	<view class="container">
		<Navbar fixed />
		<view class="article">
			<view class="title"> {{ detail.articleDesc || detail.videoDesc }} </view>
			<view class="person">
				<image :src="detail.createAvatar" />
				<view class="person-info">
					<view class="name">{{detail.createBy}}</view>
					<view class="time"> {{detail.createTime}} </view>
				</view>
			</view>
			<view class="rich">
				<rich-text v-if="detail.articleContent" :nodes="detail.articleContent"></rich-text>
				<video v-if="detail.videoPathUrl" :src="detail.videoPathUrl"></video>
				<!-- videoPathUrl -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import Navbar from '@/components/Navbar/Navbar.vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getArticleDetail, getVideoDetail } from '@/api/portfolio.js';
	import { ref } from 'vue';

	const detail = ref({});

	const getDtail = async (id, type) => {
		if (type == 0) {
			detail.value = await getArticleDetail(id);
		} else {
			detail.value = await getVideoDetail(id);
		}
	};

	onLoad((option) => {
		const { id, type } = option;
		getDtail(id, type);
	});
</script>

<style lang="scss" scoped>
	.container {
		padding: 84rpx 38rpx;

		.article {
			width: 100%;
			overflow: auto;

			.title {
				color: #fffefe;
				font-family: 'PINGFANG-HEAVY';
				font-size: 52rpx;
				font-weight: 600;
				line-height: 74rpx;
			}

			.person {
				margin: 20rpx 0;
				display: flex;
				align-items: center;
				gap: 40rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				&-info {
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.name {
						color: #fffefe;
						font-family: 'PINGFANG-BOLD';
						font-size: 32rpx;
						font-weight: 600;
						line-height: 34rpx;
					}

					.time {
						color: #9d9fa0;
						font-family: 'PINGFANG-MEDIUM';
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
					}
				}
			}

			.rich {
				color: #f1f1f1;
				font-family: 'PINGFANG-MEDIUM';
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 36rpx;

				video {
					width: 100%;
				}
			}
		}
	}
</style>
